<template>
	<view class="">
		<view class="cart-container" v-if="cart.length !== 0">
			<my-address></my-address>
			<!-- <text>购物车页面</text> -->
			<view class="cart-title">
				<uni-icons type="shop" size='30'></uni-icons>
				<text class="cart-title-text">购物车</text>
			</view>
			<view class="cart-list">
				<uni-swipe-action>
					<block v-for="(goods,index) in cart" :key='index'>
						<uni-swipe-action-item :right-options='options' @click="swiperItemClickHandler(goods)"> 
							<goods-item :goods="goods" :showRadio='showRadio' @numChange='numChange' :showNum="shouNum" @radioChange='radioChange'></goods-item>
						</uni-swipe-action-item>
						
						
					</block>
				</uni-swipe-action>
				
			</view>
			<my-settle></my-settle>
			
		</view>
		
		<view class="empty-cart" v-else>
			<image src="/static/cart_empty@2x.png" mode=""></image>
			<text>空空如也~</text>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex';
	export default {
		computed:{
			...mapState('cart_m',['cart']),
			...mapGetters('cart_m',['total'])
		},
		data() {
			return {
				showRadio:true,
				shouNum:true,
				options:[
					{
						text:'删除',
						style:{
							backgroundColor:'#c00000'
						}
					}
				]
			};
		},
		onLoad() {
			console.log(this.$store);
		},
		onShow() {
			this.setBadge()
		},
		methods:{
			...mapMutations('cart_m',['updateGoodsState','updateGoodsCount','removeGoodsById']),
			radioChange(goods_id_state){
				this.updateGoodsState(goods_id_state)
			},
			numChange(goods_id_count){
				console.log(goods_id_count);
				this.updateGoodsCount(goods_id_count);
				this.setBadge();
			},
			setBadge(){
				uni.setTabBarBadge({
					index:2,
					text:this.total + ''
				})
			},
			swiperItemClickHandler(goods){
				console.log(111);
				console.log(goods);
				this.removeGoodsById(goods.goods_id);
				this.setBadge();
			},
		}
	}
</script> 

<style lang="scss">
.cart-container{
	padding-bottom: 50px;
	.cart-title {
		height: 50px;
		padding-left: 10px;
		border-bottom: 1px solid #ccc;
		.cart-title-text {
			
		}
	}
}
.empty-cart{
	display: flex;
	flex-direction: column;
	align-items: center; 
	padding-top: 180px;
	image {
		height: 130px;
		width: 130px;
	}
}
</style>
